import QRCode from 'qrcodejs2';
// 海报
// 画圆角矩形 ctx、x起点、y起点、w宽度、h高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
function roundRect(ctx, x, y, w, h, r, fillColor, strokeColor, btn) {
    // 开始绘制
    ctx.beginPath()
    // 绘制左上角圆弧 Math.PI = 180度
    // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
    // 绘制border-top
    // 移动起点位置 x终点、y终点
    ctx.moveTo(x + r, y)
    // 画一条线 x终点、y终点
    ctx.lineTo(x + w - r, y)
    // 绘制右上角圆弧
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
    // 绘制border-right
    ctx.lineTo(x + w, y + h - r)
    // 绘制右下角圆弧

    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

    // 绘制左下角圆弧

    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

    // 绘制border-left
    ctx.lineTo(x, y + r)
    if (btn == 'btn') {
        const grd = ctx.createLinearGradient(0, 0, 200, 0) //渐变色
        grd.addColorStop(0, fillColor)
        grd.addColorStop(1, strokeColor)
        // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
        ctx.setFillStyle(grd)
        // 对绘画区域填充
        ctx.fill()
    } else {

        if (fillColor) {
            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
            ctx.setFillStyle(fillColor)
            // 对绘画区域填充
            ctx.fill()
        }
        if (strokeColor) {
            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
            ctx.setStrokeStyle(strokeColor)
            // 画出当前路径的边框
            ctx.stroke()
        }
    }
    // 关闭一个路径
    ctx.closePath()
    // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
    ctx.clip()
}


/**
 * canvas绘图相关，把文字转化成只能行数，多余显示省略号
 * ctx: 当前的canvas
 * text: 文本
 * contentWidth: 文本最大宽度
 * lineNumber: 显示几行
 */
function canvasMultiLineText(ctx, text, contentWidth, lineNumber) {
    var textArray = text.split(""); // 分割成字符串数组
    var temp = "";
    var row = [];
    for (let i = 0; i < textArray.length; i++) {
        if (ctx.measureText(temp).width < contentWidth) {
            temp += textArray[i];
        } else {
            i--; // 这里添加i--是为了防止字符丢失
            row.push(temp);
            temp = "";
        }
    }
    row.push(temp);

    // 如果数组长度大于2，则截取前两个
    if (row.length > lineNumber) {
        var rowCut = row.slice(0, lineNumber);
        var rowPart = rowCut[1];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
            if (ctx.measureText(test).width < contentWidth) {
                test += rowPart[a];
            } else {
                break;
            }
        }
        empty.push(test); // 处理后面加省略号
        var group = empty[0] + '...'
        rowCut.splice(lineNumber - 1, 1, group);
        row = rowCut;
    }
    return row;
}

function getImgTemp(src) {
    return new Promise((resolve, reject) => {
        let image = new Image()
        image.src = src
        image.setAttribute('crossOrigin', 'Anonymous')
        image.onload = function() {
            resolve(image)
        }
    })
}


function cropImage(imgEle, x, y, width, height) {
    // imgEle new Image对象
    // 创建一个新的 canvas 以保存截取的图片
    var resultCanvas = document.createElement('canvas');
    resultCanvas.width = width;
    resultCanvas.height = height;
    // 绘制截取的部分
    var resultCtx = resultCanvas.getContext('2d');
    resultCtx.drawImage(
        imgEle,
        x, y, width, height,
        0, 0, width, height
    );
    return resultCanvas.toDataURL();
}


function drawCircleImage(ctx, img, x, y, radius) {
    ctx.save()
    let size = 2 * radius
    ctx.arc(x, y, radius, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(img, x - radius, y - radius, size, size)
    ctx.restore();
}


function createQRcode(url) {
    return new Promise(async (resolve, reject) => {
        var element = document.createElement('div')
        element.style.display = 'none'
        new QRCode(element, {
            text: url,
            width: 250,
            height: 250,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })

        if (navigator.userAgent.indexOf('Android') > -1) {
            setTimeout(() => {
                const qrCanvs = element.getElementsByTagName('canvas')[0];
                const qrcBase64 = qrCanvs.toDataURL('image/jpeg'); // 转成jpg
                resolve(qrcBase64)
            }, 50)
        } else {
            let count = 0;
            let timer = setInterval(() => {
                count++
                if (navigator.userAgent.indexOf('Android') > -1) {
    
                } else {
                    if (element.children[1].currentSrc) {
                        clearInterval(timer)
                        resolve(element.children[1].currentSrc)
                        element = null
                    }
                }
                if (count >= 20) {
                    clearInterval(timer)
                    element = null
                    reject('二维码生成失败')
                }
            }, 100)
        }
    })
}




export {
    canvasMultiLineText,
    roundRect,
    getImgTemp,
    cropImage,
    drawCircleImage,
    createQRcode
}
